<template>
  <div id="recommend">
    <div class="recommend-head">
      <Icon type="md-bookmark" />
      <span> 最新推荐</span>
    </div>
    <div class="image-list">
      <div class="image-list-item" 
        v-for="(item,index) in recommendList"
        :key="index"
      >
        <router-link :to="'/blog/' + item.id">
          <div class="image-list-cover">
            <img v-lazy="item.firstPicture" :alt="item.title" class="image-list-bg">
          </div>
          <div class="image-list-info">
            <div class="image-list-title" v-text="item.title"></div>
            <div class="image-list-time" v-text="createTime(item.createTime)"></div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "utils/utils";

export default {
  name: 'Recommend',
  computed: {
    recommendList() {
      return this.$store.getters['blog/recommends']
    }
  },
  methods: {
    createTime(date) {
      return formatDate(new Date(date), "yyyy-MM-dd");
    }
  },
}
</script>

<style lang="scss" scoped>
#recommend{
  box-shadow: 0 2px 9px rgba(31,45,61,.15);
  padding: 1rem 1.2rem;
  background: #fff;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  .recommend-head {
    font-size: 18px;
  }
  .image-list {
    padding-top: 10px;
    margin: 10px 0 -15px;
    .image-list-item {
      margin-bottom: 5px;
      .image-list-cover {
        float: left;
        overflow: hidden;
        width: 66px;
        height: 66px;
        .image-list-bg {
          padding: 0;
          max-width: 100%;
          width: 100%;
          height: 75%;
          border-radius: 3px;
          transition: all .6s;
          -o-object-fit: cover;
          object-fit: cover;
          &:hover {
            transform: scale(1.1);
          }
        }
      }
      .image-list-info {
        height: 66px;
        .image-list-title {
          color: #5e5a6e;
          font-size: 1rem;
          padding-left: 9px;
          height: 33px;
          line-height: 1rem;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          transition: all 0.6s ease;
          &:hover{
            padding-left: 25px;
            color: #28cfcf;
          }
        }
        .image-list-time {
          padding-left: 9px;
          color: #858585;
          font-size: .8rem;
          overflow: hidden;
        }
      }
    }
  }
}
</style>